<template>
	<view class="home position-relative">
		<view class="bg-1a position-absolute padding-top-40 width-100p" style="height: 220rpx;">
			<view class="flex align-center justify-center" v-if="detail.status==0">
				<image src="/static/board/time.png" mode="" class="statusimg"></image>
				<view class="text-36 text-ff margin-left-15">未开始</view>
			</view>
			<view class="flex align-center justify-center" v-if="detail.status==2">
				<image src="/static/board/daizf.png" mode="" class="statusimg"></image>
				<view class="text-36 text-ff margin-left-15">待支付</view>
			</view>
			<view class="text-ff text-center text-24 margin-top-15" v-if="detail.status==2">剩余支付时间: <text
					class="padding-left-10">{{quxiaoSecond}}</text> </view>
			<view class="flex align-center justify-center" v-if="detail.status==1&&detail.order_status==0">
				<image src="/static/board/jxz.png" mode="" class="statusimg"></image>
				<view class="text-36 text-ff margin-left-15">进行中</view>
			</view>
			<view class="flex align-center justify-center" v-if="detail.status==1&&detail.order_status==1">
				<image src="/static/board/daizf.png" mode="" class="statusimg"></image>
				<view class="text-36 text-ff margin-left-15">待支付</view>
			</view>
			<view class="flex align-center justify-center" v-if="detail.status==3">
				<view class="tyIcon-round-check text-ff text-40"></view>
				<view class="text-36 text-ff margin-left-15">已完成</view>
			</view>
			<view class="flex align-center justify-center" v-if="detail.status==4">
				<image src="/static/board/qx.png" mode="" class="statusimg"></image>
				<view class="text-36 text-ff margin-left-15">已取消</view>
			</view>
		</view>
		<view class="padding-lr-30 position-relative"
			:style="detail.status==2?'padding-top: 155rpx;':'padding-top: 120rpx;'">
			<view class="bg-ff bg-shadow radius-40 padding-30">
				<view class="flex">
					<view class="text-28 text-66">门店名</view>
					<view class="flex-one text-right text-28">{{detail.shop_name}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">包间/大厅</view>
					<view class="flex-one text-right text-28">{{detail.room_name}}</view>
				</view>
				<view class="flex align-center margin-top-30" v-if="detail.status==3||detail.status==4">
					<view class="text-28 text-66">桌游主题</view>
					<view class="flex-one text-right text-28">{{detail.theme}}</view>
					<text class="tyIcon-arrow-right text-24 text-77"></text>
				</view>
				<view class="flex align-center margin-top-30" v-else>
					<view class="text-28 text-66">桌游主题</view>
					<!-- <view class="flex-one text-right text-28">{{detail.theme}}</view> -->
					<input type="text" class="flex-one text-right text-28" v-model="detail.theme" placeholder="请输入桌游主题"
						@confirm="getzt" @blur="getzt" />
					<text class="tyIcon-arrow-right text-24 text-77"></text>
				</view>

				<view class="flex align-center padding-tb-20">
					<view class="text-28 text-66 flex-one">是否接受拼桌</view>
					<view class="margin-right-20" @click="choseput(1)" :class="detail.shared_table==1?'yesbtn':'nobtn'">
						是</view>
					<view class="" @click="choseput(0)" :class="detail.shared_table==0?'yesbtn':'nobtn'">否</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">预约时间</view>
					<view class="flex-one text-right text-28" v-if="detail.reservations_id">
						{{detail.join_method}}/预约{{detail.reservations_count}}人
					</view>
					<view class="flex-one text-right text-28" v-else>无</view>
				</view>
				<view class="text-right text-28">{{detail.reservations_time}}</view>
				<view class="flex margin-top-30" v-if="detail.reservations_phone">
					<view class="text-28 text-66">预约电话</view>
					<view class="flex-one text-right text-28">{{detail.reservations_phone}}</view>
				</view>

				<view class="flex align-center justify-center">
					<view class="yjbtn">￥{{detail.play_money}}/人/小时</view>
				</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40">
				<view class="flex">
					<view class="text-28 text-66">号码编号</view>
					<view class="flex-one text-right text-28">{{detail.code?detail.code:'无'}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">开始时间</view>
					<view class="flex-one text-right text-28">{{detail.join_time_text?detail.join_time_text:'无'}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">结束时间</view>
					<view class="flex-one text-right text-28">{{detail.leave_time_text?detail.leave_time_text:'无'}}
					</view>
				</view>
				<view class="flex margin-top-30" v-if="detail.gift_time>0">
					<view class="text-28 text-66">店铺赠送时长</view>
					<view class="flex-one text-right text-28">{{detail.gift_time}}分钟
					</view>
				</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40 flex align-center" v-if="detail.status==0">
				<view class="text-28 text-66">点单</view>
				<view class="flex-one text-right text-28">无</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40 flex align-center"
				v-if="detail.goodinfo.length==0&&detail.status>0">
				<view class="text-28 text-66">点单</view>
				<view class="flex-one text-right text-28">无</view>
			</view>
			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40" v-if="detail.status==0">
				<view class="flex">
					<view class="text-28 text-66">订单编号</view>
					<view class="flex-one text-right text-28">{{detail.order_no}}</view>
				</view>
				<view class="flex margin-top-30">
					<view class="text-28 text-66">已付押金</view>
					<view class="flex-one text-right text-28">{{detail.deposit}}</view>
				</view>
				<view class="flex margin-top-30" v-if="detail.pay_type">
					<view class="text-28 text-66">支付方式</view>
					<view class="flex-one text-right text-28">{{detail.pay_type}}</view>
				</view>
				<view class="flex margin-top-30" v-if="detail.pay_time">
					<view class="text-28 text-66">支付时间</view>
					<view class="flex-one text-right text-28">{{detail.pay_time}}</view>
				</view>
				<view class="flex margin-top-30 padding-bottom-30 border-bottom-f7" v-if="detail.record_money">
					<view class="text-28 text-66">优惠券</view>
					<view class="flex-one text-right text-28">{{detail.record_money}}</view>
				</view>
			</view>
			<view class="cancelbtn" @click="getqshow" v-if="detail.status==0">取消预约</view>
			<view class="text-28 margin-top-25" style="color: #FF0000;" v-if="detail.status==0">*预约时间前6小时取消需收30%违约金
			</view>
			<view class="wjbg position-relative" v-if="detail.status==1">
				<image src="/static/board/wjbg.png" mode="" class="wjimg position-absolute"></image>
				<view class="position-relative wjcont">
					<view class="text-52 text-bold" v-if="detail.order_status==0">{{cancelSecond}}</view>
					<view class="text-52 text-bold" v-if="detail.order_status==1">待支付</view>
				</view>
				<view @click="qrcode(0)" class="player1" v-if="detail.userinfo[0]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[0].status=='正在使用'">
						<image :src="detail.userinfo[0].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[0].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[0].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[0].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[0].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(1)" class="player2" v-if="detail.userinfo[1]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[1].status=='正在使用'">
						<image :src="detail.userinfo[1].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[1].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[1].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[1].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[1].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(2)" class="player3" v-if="detail.userinfo[2]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[2].status=='正在使用'">
						<image :src="detail.userinfo[2].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[2].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[2].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[2].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[2].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>

				<view @click="qrcode(3)" class="player4" v-if="detail.userinfo[3]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[3].status=='正在使用'">
						<image :src="detail.userinfo[3].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[3].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[3].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[3].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[3].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(4)" class="player5" v-if="detail.userinfo[4]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[4].status=='正在使用'">
						<image :src="detail.userinfo[4].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[4].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[4].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[4].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[4].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(5)" class="player6" v-if="detail.userinfo[5]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[5].status=='正在使用'">
						<image :src="detail.userinfo[5].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[5].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[5].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[5].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[5].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(6)" class="player7" v-if="detail.userinfo[6]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[6].status=='正在使用'">
						<image :src="detail.userinfo[6].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[6].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[6].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[6].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[6].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(7)" class="player8" v-if="detail.userinfo[7]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[7].status=='正在使用'">
						<image :src="detail.userinfo[7].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[7].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[7].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[7].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[7].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(8)" class="player9" v-if="detail.userinfo[8]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[8].status=='正在使用'">
						<image :src="detail.userinfo[8].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[8].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[8].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[8].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[8].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(9)" class="player10" v-if="detail.userinfo[9]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[9].status=='正在使用'">
						<image :src="detail.userinfo[9].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[9].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[9].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[9].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[9].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(10)" class="player11" v-if="detail.userinfo[10]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[10].status=='正在使用'">
						<image :src="detail.userinfo[10].user_info.user.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[10].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[10].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[10].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[10].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
				<view @click="qrcode(11)" class="player12" v-if="detail.userinfo[11]">
					<view class="width-100p height-100p position-relative" v-if="detail.userinfo[11].status=='正在使用'">
						<image :src="detail.userinfo[11].user_info.avatar" mode="" class="headimg"></image>
						<image src="/static/board/g-nan.png" mode="" class="playerg"
							v-if="detail.userinfo[11].user_info.gender==1"></image>
						<image src="/static/board/g-nv.png" mode="" class="playerg"
							v-if="detail.userinfo[11].user_info.gender==0"></image>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						style="background: #545454;" v-if="detail.userinfo[11].status=='已预约'">
						<image src="/static/board/time.png" mode="" class="timeimg"></image>
						<view class="text-ff text-24">预约</view>
					</view>
					<view class="flex align-center flex-direction width-100p height-100p justify-center radius-50p"
						v-if="detail.userinfo[11].status=='空闲'">
						<view class="text-ff text-24">空闲</view>
					</view>
				</view>
			</view>

			<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40" v-if="detail.status==3">
				<view class="" v-for="(item,index) in detail.userinfos" :key="index">
					<view class="flex align-center">
						<view class="text-28 flex-one text-66">号码编号</view>
						<view class="text-28">{{item.code}} <text v-if="item.is_my==1">（自己）</text></view>
						<image :src="item.avatar" mode="" class="headimg"></image>
						<view class="text-28">{{item.nickname}}</view>
					</view>
					<view class="flex margin-top-30">
						<view class="text-28 text-66">游戏时长</view>
						<view class="flex-one text-right text-28">{{item.time_long}}</view>
					</view>
					<view class="text-right text-28">{{item.reservations_time}}</view>
					<view class="flex margin-top-30 padding-bottom-30 border-bottom-f7">
						<view class="text-28 text-66">费用</view>
						<view class="flex-one text-right text-28">￥{{item.total}}</view>
					</view>
				</view>
				<view class="flex align-center margin-top-30">
					<view class="text-28 flex-one text-right">
						小计： <text class="text-red">￥{{detail.usermoney}}</text>
					</view>
				</view>
			</view>

			<view :class="detail.status==3?'margin-top-40':'margin-top-100'">
				<view class="text-32" v-if="detail.goodinfo.length">点单</view>
				<view class="padding-25 bg-ff bg-shadow radius-40 margin-top-10" v-if="detail.goodinfo.length">
					<view class="flex margin-bottom-25 border-bottom-f7 padding-bottom-40"
						v-for="(item,index) in detail.goodinfo" :key="index">
						<image :src="item.goodimage" mode="" class="listimg"></image>
						<view class="flex-one margin-left-30">
							<view class="text-28 height-60 line-30 text-cut-two">{{item.goodname}}</view>
							<view class="flex align-center margin-top-40">
								<view class="text-red text-28 flex-one">￥{{item.price}}</view>
								<view class="text-28 text-red">x{{item.num}}</view>
							</view>
						</view>
					</view>
					<view class="text-28 text-right margin-top-25">
						小计： <text class="text-red">￥{{detail.goodmoeny}}</text>
					</view>
				</view>
				<view class="bg-ff bg-shadow radius-40 padding-30 margin-top-40"
					v-if="detail.status!=1&&detail.status!=0&&detail.status!=2">
					<view class="flex">
						<view class="text-28 text-66">订单编号</view>
						<view class="flex-one text-right text-28">{{detail.order_no}}</view>
					</view>
					<view class="flex margin-top-30">
						<view class="text-28 text-66">已付押金</view>
						<view class="flex-one text-right text-28">{{detail.deposit}}</view>
					</view>
					<view class="flex margin-top-30" v-if="detail.pay_type">
						<view class="text-28 text-66">支付方式</view>
						<view class="flex-one text-right text-28">{{detail.pay_type}} </view>
					</view>
					<view class="flex margin-top-30" v-if="detail.pay_time">
						<view class="text-28 text-66">支付时间</view>
						<view class="flex-one text-right text-28">{{detail.pay_time}}</view>
					</view>
					<view class="flex margin-top-30 padding-bottom-30 border-bottom-f7" v-if="detail.record_money">
						<view class="text-28 text-66">优惠券</view>
						<view class="flex-one text-right text-28">{{detail.record_money}}</view>
					</view>
					<!-- <view class="flex margin-top-30" v-if="detail.pay_type">
						<view class="text-28 text-66">支付方式</view>
						<view class="flex-one text-right text-28">{{detail.pay_type}}</view>
					</view>
					<view class="flex margin-top-30" v-if="detail.pay_time">
						<view class="text-28 text-66">支付时间</view>
						<view class="flex-one text-right text-28">{{detail.pay_time}}</view>
					</view> -->
				</view>
				<view class="margin-top-100 flex align-center justify-between" v-if="detail.status==2">
					<view class="qxbtn" @click="getCancel">取消预约</view>
					<view class="zfbtn" @click="gopay">去支付</view>
				</view>
				<view v-if="detail.status==1">
					<view class="padding-25 bg-ff bg-shadow radius-40 margin-top-40" v-if="detail.order_status==1">
						<view class="flex align-center" @click="getCoup">
							<view class="text-28 text-66">优惠券</view>
							<view class="flex-one text-right text-28">
								{{coupon_name?'已选'+coupon_name:'请选择'}}
							</view>
							<view class="cuIcon-right text-66"></view>
						</view>
						<view class="flex align-center margin-top-30">
							<view class="text-28 flex-one">
								小计： <text class="text-red">￥{{(xjmon).toFixed(1)}}</text>
							</view>
							<view class="fpbtn" v-if="paytype==1" @click="go('/pages/board/friend?id='+detail.id)">帮朋友支付
							</view>
						</view>
					</view>
					<view class="flex align-center margin-top-40" v-if="detail.order_status==1">
						<view class="text-32 text-bold">支付方式</view>
						<view class="flex-one text-right text-24 text-66">已付押金￥{{detail.deposit}}</view>
					</view>
					<view class="padding-30 bg-ff bg-shadow radius-40 margin-top-40" v-if="detail.order_status==1">
						<view class="flex align-center" @click="chosePaytype(1)">
							<image src="/static/board/wx.png" mode="" class="wximg"></image>
							<view class="text-28 margin-lr-20">微信支付</view>
							<view class="flex-one margin-left-10">
								<view class="text-24 text-99">(钱包余额￥{{detail.user_balance}})</view>
								<view class="text-24 text-99">押金和钱包抵扣后还需支付￥{{detail.left_money}}</view>
							</view>
							<view :class="paytype==1 ? 'tyIcon-round-check text-1a' : 'tyIcon-round text-cc'"></view>
						</view>
						<view class="flex align-center margin-top-25" @click="chosePaytype(2)">
							<image src="/static/board/wxmoney.png" mode="" class="wxmoney"></image>
							<view class="text-28 margin-lr-20">月卡抵扣桌游</view>
							<view class="flex-one margin-left-10">
								<view class="text-24 text-99">(余{{detail.month_card}}次畅玩)</view>
							</view>
							<view :class="paytype==2 ? 'tyIcon-round-check text-1a' : 'tyIcon-round text-cc'"></view>
						</view>
					</view>
					<view class="text-24 text-66 margin-top-25" v-if="detail.order_status==1">说明:月卡只能抵扣桌游，不能抵扣点单的费用。
					</view>
				</view>
				<view class="paybg margin-top-60 flex align-center padding-left-40 justify-between"
					v-if="detail.order_status==1">
					<view class="text-28">合计 ￥ <text>{{(hjmon).toFixed(1)}}</text> </view>
					<view class="paybtn" @click="getPay">结账买单</view>
				</view>
			</view>
			<view class="flex align-center justify-between margin-top-100"
				v-if="detail.status==1&&detail.order_status==0">
				<view class="hjfw" @click="getHu">呼叫服务</view>
				<view class="jsfw" @click="getOver">结束游玩</view>
			</view>
			<view class="margin-top-85 flex justify-between" v-if="detail.order_status==0">
				<view class="bg-1a bg-shadow jxan flex align-center justify-center flex-direction radius-50"
					@click="go('/pages/board/index',2)">
					<image src="/static/board/home.png" mode="" class="jximg"></image>
					<view class="text-22 text-ff">首页</view>
				</view>
				<view class="bg-ff bg-shadow jxan flex align-center justify-center flex-direction radius-50"
					@click="go('/pages/board/book?id='+detail.id)">
					<image src="/static/board/footer2.png" mode="" class="jximg"></image>
					<view class="text-22 text-99">点单</view>
				</view>
				<view class="bg-ff bg-shadow jxan flex align-center justify-center flex-direction radius-50"
					@click="goPin()">
					<image src="/static/board/zhuo.png" mode="" class="jximg"></image>
					<view class="text-22 text-99">拼桌</view>
				</view>
				<view class="bg-ff bg-shadow jxan flex align-center justify-center flex-direction radius-50"
					@click="go('/pages/board/memberpay',1)">
					<image src="/static/board/footer3.png" mode="" class="jximg"></image>
					<view class="text-22 text-99">会员充值</view>
				</view>
			</view>
		</view>
		<!-- 取消预约浮层 -->
		<view class="layer flex align-center justify-center flex-direction" v-if="is_cancel_show" @click="getqguan">
			<view class="layer_cancel" @click.stop>
				<view class="text-34 text-bold text-center" style="padding-top: 64rpx;">取消预约？</view>
				<view class="text-28 margin-top-10 text-center" style="color: #FF0000;">预约时间前6小时取消需收30%违约金</view>
				<view class="margin-top-25 flex border-top-ed">
					<view class="flex-one border-right-ed text-32 text-bold text-66 text-center line-height-90"
						@click="getqguan">取消</view>
					<view class="flex-one text-bold text-32 text-center line-height-90" @click="getCancel">确认取消并支付
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="layer flex align-end" v-if="is_coupon_show" @click="getcshow">
			<view class="layercoupon" @click.stop>
				<view class="flex align-center justify-between padding-top-40 padding-lr-50">
					<view class="text-32" @click="getcshow">取消</view>
					<view class="text-36 text-bold">可用优惠券</view>
					<view class="text-32" @click="subCoup">确认</view>
				</view>
				<scroll-view scroll-y="true" class="height-330 padding-lr-30 margin-top-60">
					<view class="bg-f5 radius-15 flex align-center padding-right-50 margin-bottom-25"
						v-for="(item,index) in couplist" :key="index" @click="chosecoup(item.id,item.name,item.money)">
						<view class="coupbtn flex align-center flex-direction justify-center">
							<!-- style="font-size: 84rpx;" -->
							<view class="text-42 text-ff">￥ <text>{{item.money}}</text> </view>
							<view class="text-24 text-ff margin-top-5">满{{item.min_money}}元可用</view>
						</view>
						<view class="flex-one margin-left-30">
							<view class="text-32 text-cut-one">{{item.name}}</view>
							<view class="text-24 margin-top-15">{{item.expire_time_text}}</view>
						</view>
						<view :class="coupid==item.id ? 'tyIcon-round-check text-1a' : 'tyIcon-round text-cc'"></view>
					</view>
				</scroll-view>
				<view class="text-24 text-99 margin-lr-30">说明，每订单最多能用1张优惠券</view>
				<view class="flex align-center justify-between margin-lr-30 margin-top-40">
					<view class="hjfw" @click="getcshow">取消</view>
					<view class="jsfw" @click="subCoup">确认</view>
				</view>
			</view>
		</view>
		<!-- 二维码 -->
		<view class="layer" v-if="show_sign" @click="chosecode">
			<view class="layerbg y_center" @click.stop>
				<image :src="detail.userinfo[qrcode_num].user_info.avatar" mode="" class="duiimg"></image>
				<view class="text-32 margin-top-10">{{detail.userinfo[qrcode_num].user_info.name}}</view>
				<image :src="detail.userinfo[qrcode_num].user_info.link_img" mode="" class="qriimg"></image>
				<view class="text-24 text-66 margin-top-20 text-center">TA微信二维码</view>
				<view @click="sign()" class="but border-top-ed padding-tb-25 margin-top-30 text-center">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				type: "",
				detail: "",
				is_cancel_show: false,
				// 二维码
				show_sign: false,
				qrcode_num: 0,
				coupon_name: "",
				paytype: 1,
				couplist: [],
				coupid: "",
				is_coupon_show: false,
				// 订单自动计时
				cancelSecond: '',
				// 自动取消订单倒计时定时器
				cancelSecondIntervalTimer: '',
				hjmon: "", //合计金额
				xjmon: "", //小计金额
				coupon_price: "",
				quxiaoSecond: '00:00:00',
				quxiaoSecondIntervalTimer: '',
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.type = options.type
		},
		onShow() {
			this.getDetail()

		},
		methods: {
			getDetail() {
				this.rq.getData('order/order_detail', {
					id: this.id,
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
						if (uni.getStorageSync('xjmon')) {
							this.xjmon = uni.getStorageSync('xjmon')
						} else {
							this.xjmon = res.data.total
						}
						this.resetTime(res.data.join_time_second)
						if (res.data.pay_second > 0) {
							this.Quxorder(res.data.pay_second)
						}
						this.getMoney()
					}
				})
			},
			Quxorder(second) {
				this.quxiaoSecondIntervalTimer = setInterval(res => {
					if (second > 0) {
						let time = this.cn.timeSplit(second, 2)
						this.quxiaoSecond = time.minute + ":" + time.second
							--second
					} else {
						this.quxiaoSecond = '00:00:00'
						clearInterval(this.quxiaoSecondIntervalTimer)
						this.getDetail()
					}
				}, 1000)

			},
			resetTime(second) {
				this.cancelSecondIntervalTimer = setInterval(res => {
					let time = this.cn.timeSplit(second, 3)
					this.cancelSecond = time.hour + ":" + time.minute + ":" + time.second
					if (this.detail.pause_status == 2) {
						return false
					}
					++second


					// console.log(this.cancelSecond)
				}, 1000)

			},
			//取消预约
			getCancel() {
				this.rq.getData('Reservations/reservation_cancel', {
					id: this.detail.id
				}).then(res => {
					uni.navigateBack({
						delta: 1
					})
				})
			},

			//呼叫服务
			getHu() {
				this.cn.confirm('是否确认呼叫服务').then(res => {
					if (res.confirm) {
						this.rq.getData('order/Notice', {
							occupants_id: this.detail.id
						}).then(res => {
							if (res.code == 1) {
								this.cn.alert('呼叫成功')
							}
						})
					}
				})

			},
			//结束服务
			getOver() {
				this.rq.getData('order/end_order', {
					id: this.detail.id
				}).then(res => {
					if (res.code == 1) {
						this.getDetail()
					}
				})
			},
			chosePaytype(i) {
				this.paytype = i
			},
			chosecoup(id, name, money) {
				this.coupid = id
				this.coupon_name = name
				this.coupon_price = money
			},
			subCoup() {
				if (this.coupid == '') {
					this.cn.alert('请选择优惠券')
					return false
				}
				this.hjmon = Number(this.hjmon) - Number(this.coupon_price)
				this.is_coupon_show = false
			},
			getCoup() {
				this.rq.getData('coupon/coupon_record', {
					price: this.xjmon
				}).then(res => {
					if (res.code == 1) {
						this.couplist = res.data
						this.is_coupon_show = true
					}
				})

			},
			//计算合计
			getMoney() {
				var coupon_price = this.coupon_price ? this.coupon_price : 0
				this.hjmon = Number(this.xjmon) - Number(coupon_price)
			},
			getPay() {
				var ids = uni.getStorageSync('ids') ? uni.getStorageSync('ids') : ''
				if (this.paytype == 1) {
					ids = uni.getStorageSync('ids') ? uni.getStorageSync('ids').join(',') : this.detail.id
				} else {
					ids = this.detail.id
				}
				this.rq.getData('order/add_order', {
					method: this.paytype == 1 ? '微信' : '月卡',
					ids: ids,
					coupon_record_id: this.coupid
				}).then(res => {
					if (res.code == 1) {
						if (res.data.is_pay == 0) {
							this.cn.alert('支付成功')
							this.getDetail()
						} else {
							this.rq.getData('order/Order_payment', {
								id: res.data.id
							}).then(res => {
								if (res.data.payment) {
									this.cn.requestPayment({
										appId: res.data.payment.appId,
										nonceStr: res.data.payment.nonceStr,
										package: res.data.payment.package,
										paySign: res.data.payment.paySign,
										signType: res.data.payment.signType,
										timeStamp: res.data.payment.timeStamp,
									}, 1).then(res => {
										uni.removeStorageSync('ids')
										this.getDetail()
									}).catch(res => {
										uni.removeStorageSync('ids')
										this.getDetail()
									})
								}
							})

						}

					}
				})
			},
			//拼
			goPin() {
				uni.showModal({
					content: '因你还有未结帐的订单， 需结帐后才能拼桌',
					cancelText: '取消',
					cancelColor: "#727272",
					confirmText: "去结账",
					confirmColor: '#111111',
					success: function(res) {
						if (res.confirm) {

						} else if (res.cancel) {

						}
					}
				})
			},
			// 查看二维码
			qrcode(e) {
				if (this.detail.userinfo[e].status == '空闲') {
					return false
				}
				this.qrcode_num = e
				this.show_sign = true
				console.log(this.detail.userinfo[this.qrcode_num])
			},
			sign() {
				uni.downloadFile({
					url: this.detail.userinfo[this.qrcode_num].user_info.link_img,
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									title: '保存成功'
								}).then(res => {
									this.show_sign = false
								})
							}
						})
					}
				})

			},
			getqshow() {
				this.is_cancel_show = true
			},
			getqguan() {
				this.is_cancel_show = false
			},
			chosecode() {
				this.show_sign = false
			},
			getcshow() {
				this.is_coupon_show = false
			},
			//修改主题
			getzt() {
				this.rq.getData('room/saveroom_theme', {
					id: this.detail.room_id,
					theme: this.detail.theme
				}).then(res => {
					if (res.code == 1) {
						this.cn.alert('修改成功')
						this.getDetail()
					}
				})
			},
			choseput(i) {
				this.detail.shared_table = i
				this.rq.getData('room/saveroom_shared_table', {
					id: this.detail.room_id,
					shared_table: i
				}).then(res => {
					if (res.code == 1) {
						this.getDetail()
					}
				})
			},
			//待支付去付款
			gopay() {
				this.rq.getData('Reservations/again_payment', {
					id: this.detail.id
				}).then(res => {
					if (res.code == 1) {
						if (res.data.is_pay == 0) {
							this.cn.alert('支付成功')
							this.getDetail()
						} else {
							this.rq.getData('Reservations/reservation_payment', {
								id: res.data.id
							}).then(res => {
								if (res.data.payment) {
									this.cn.requestPayment({
										appId: res.data.payment.appId,
										nonceStr: res.data.payment.nonceStr,
										package: res.data.payment.package,
										paySign: res.data.payment.paySign,
										signType: res.data.payment.signType,
										timeStamp: res.data.payment.timeStamp,
									}, 1).then(res => {
										this.getDetail()
									}).catch(res => {
										this.getDetail()
									})
								}
							})

						}
					}
				})
			}
		},
		onUnload() {
			// 清除计时器
			clearInterval(this.cancelSecondIntervalTimer)
			clearInterval(this.quxiaoSecondIntervalTimer)
			uni.removeStorageSync('ids')
			uni.removeStorageSync('xjmon')
		},

		onHide() {
			// 清除计时器
			clearInterval(this.cancelSecondIntervalTimer)
			clearInterval(this.quxiaoSecondIntervalTimer)
		},
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding-bottom: 100rpx;
	}

	.statusimg {
		width: 39rpx;
		height: 39rpx;
	}

	.yjbtn {
		/* width: 230rpx; */
		height: 62rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #333333;
		line-height: 62rpx;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}

	.cancelbtn {
		width: 100%;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-top: 90rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.layerbg {
		width: 540rpx;
		/* height: 418rpx; */
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 400rpx;
		padding-top: 35rpx;
	}

	.layer_cancel {
		width: 540rpx;
		height: 270rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E5E6EB;
	}

	.hjfw {
		width: 326rpx;
		height: 88rpx;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		border: 2rpx solid #999999;
		font-size: 32rpx;
		color: #101010;
		line-height: 88rpx;
		text-align: center;
	}

	.jsfw {
		width: 326rpx;
		height: 88rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
	}

	/* 玩家信息 */
	.wjbg {
		width: 494rpx;
		height: 494rpx;
		margin: 94rpx auto;
		position: relative;
	}

	.wjcont {
		width: 494rpx;
		height: 494rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.wjimg {
		width: 604rpx !important;
		height: 604rpx !important;
		position: absolute;
		top: -55rpx;
		left: -55rpx;
	}

	.player1 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: -36rpx;
		left: 204rpx;
	}

	.player2 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: -4rpx;
		left: 74rpx;
	}

	.player3 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: 88rpx;
		left: -26rpx;
	}

	.player4 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: 206rpx;
		left: -40rpx;
	}

	.player5 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: 324rpx;
		left: -26rpx;
	}

	.player6 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		bottom: -18rpx;
		left: 74rpx;
	}

	.player7 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		bottom: -42rpx;
		left: 204rpx;
	}

	.player8 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		bottom: -18rpx;
		right: 62rpx;
	}

	.player9 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		bottom: 70rpx;
		right: -16rpx;
	}

	.player10 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: 206rpx;
		right: -44rpx;
	}

	.player11 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: 88rpx;
		right: -16rpx;
	}

	.player12 {
		width: 100rpx;
		height: 100rpx;
		background: #101010;
		border-radius: 50%;
		position: absolute;
		top: -4rpx;
		right: 62rpx;
	}

	.playerg {
		width: 21.88rpx;
		height: 21.88rpx;
		position: absolute;
		right: 4rpx;
		bottom: 8rpx;
	}

	.timeimg {
		width: 40rpx;
		height: 40rpx;
	}

	.headimg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.jxan {
		width: 148rpx;
		height: 116rpx;
	}

	.jximg {
		width: 40rpx;
		height: 40rpx;
	}

	.listimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
	}

	.fpbtn {
		width: 252rpx;
		height: 88rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.wximg {
		width: 44rpx;
		height: 44rpx;
	}

	.wxmoney {
		width: 42rpx;
		height: 42rpx;
	}

	.paybg {
		width: 690rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
	}

	.paybtn {
		width: 190rpx;
		height: 96rpx;
		background: #101010;
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}

	.layercoupon {
		width: 100%;
		height: 938rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		position: absolute;
		bottom: 0;
	}

	.height-330 {
		height: 500rpx;
	}

	.coupbtn {
		width: 180rpx;
		height: 190rpx;
		background: #101010;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.qriimg {
		width: 204rpx;
		height: 204rpx;
		display: block;
		margin: 0 auto;
	}

	.duiimg {
		margin-bottom: 30rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.but {
		width: 60%;
		background: #000;
		border-radius: 30rpx;
		padding: 20rpx 0;
		color: #fff;
		margin-bottom: 30rpx;
	}

	.text-52 {
		font-family: Digital, Digital;
		font-weight: bold;
		font-size: 52rpx;
		color: #0A0A0A;
	}

	.yesbtn {
		width: 100rpx;
		height: 56rpx;
		background: #101010;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}

	.nobtn {
		width: 100rpx;
		height: 56rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #999999;
		font-size: 28rpx;
		color: #1a1a1a;
		line-height: 56rpx;
		text-align: center;
	}

	.align-end {
		align-items: flex-end;
	}

	.qxbtn {
		width: 326rpx;
		height: 88rpx;
		background: #F3F3F3;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 32rpx;
		color: #101010;
		line-height: 88rpx;
		text-align: center;
	}

	.zfbtn {
		width: 326rpx;
		height: 88rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
	}
</style>